<template>
  <a-modal
    title="文章扩散"
    v-model:visible="visible"
    :confirm-loading="confirmLoading"
    width="80%"
    cancelText="取消"
    :okText="okText"
    :okButtonProps="{ disabled: !nextButton }"
    style="max-width: 820px"
    @ok="sumit"
  >
    <div class="warp">
      <a-steps :current="current" labelPlacement="vertical" @change="onChange">
        <a-step>
          <template #title>
            <span class="title">选择您要发布的渠道</span>
          </template>
        </a-step>
        <a-step>
          <template #title>
            <span class="title">点击渠道图标进行设置</span>
          </template>
        </a-step>
      </a-steps>
      <div v-if="current == 0">
        <div v-if="getChannel.length > 0" class="steps-content steps-first">
          <span
            class="channel"
            @click="setCheck(item.channel)"
            v-for="item of getChannel"
            :key="item.channel"
          >
            <a-avatar :size="45" :src="channels[item.channel].logo" />
            <CheckCircleTwoTone
              v-if="checks[item.channel] ? checks[item.channel] : false"
              class="check"
              style="font-size: 12px"
              twoToneColor="#52c41a"
            />
          </span>
        </div>
        <div v-else style="text-align: center">
          <router-link to="/channel">还没有发布渠道，快去开启吧！</router-link>
          <a-empty :image="simpleImage" />
        </div>
      </div>
      <div v-else>
        <div v-if="nextButton">
          <div class="steps-content steps-second">
            <span
              :style="item?'margin-right: 18px':''"
              :class="{ choice: check == key }"
              @click="choice(key)"
              v-for="(item, key) of checks"
              :key="key"
            >
              <a-avatar v-if="item" :size="45" :src="channels[key].logo" />
            </span>
          </div>
          <div class="config" v-if="check && current == 1">
            <div class="title">{{ channels[check].nameZh }} 文章发布配置</div>
            <div class="body">
              <span style="white-space: nowrap">文章链接：</span>
              <a-input
              v-model:value="url"
                placeholder="默认不填，可输入手动发布后的文章链接用于同步"
              />
              <a-button @click="updateUrl">保存</a-button>
              <a-button @click="drawer">发布配置</a-button>
            </div>
            <a-alert
              style="color: #ccc"
              message="注意：文章批量发布失败，可手动发布，然后使用此功能同步文章的数据"
              banner
            />
          </div>
        </div>
        <a-empty v-else :image="simpleImage" />
      </div>
    </div>
  </a-modal>
  <Config :open="isDrawer" :channel="channel" :editMode="true" />
</template>
<script>
import { CheckCircleTwoTone, CloseCircleTwoTone } from "@ant-design/icons-vue";
import { Empty } from "ant-design-vue";
import Config from "@/components/Config";
const channels = {
  segmentfault: {
    key: "1",
    name: "segmentfault",
    nameZh: "SegmentFault",
    logo: "http://jeff.spring4all.com/FlCADwkmaaq65DbOyht4P-polLeA",
    url: "https://segmentfault.com",
    draft: 0,
    type: 2,
  },
  csdn: {
    key: "2",
    name: "csdn",
    nameZh: "CSDN",
    logo: "http://jeff.spring4all.com/FoQhLJUwGR1tJPxkJL488fYw7qut",
    url: "https://blog.csdn.net",
    draft: 0,
    type: 2,
  },
  juejin: {
    key: "3",
    name: "juejin",
    nameZh: "掘金",
    logo: "http://jeff.spring4all.com/Fsxf9IhVs1oacRv84oXJOBCZBjYR",
    url: "https://juejin.im",
    draft: 0,
    type: 2,
  },
  cnblogs: {
    key: "4",
    name: "cnblogs",
    nameZh: "博客园",
    logo: "http://jeff.spring4all.com/FkGLBKIzgAYW7j7K47uCefg-g0lY",
    url: "https://www.cnblogs.com",
    draft: 0,
    type: 2,
  },
  jianshu: {
    key: "5",
    name: "jianshu",
    nameZh: "简书",
    logo: "http://jeff.spring4all.com/FvnKt62tFvOXudjUNMtLKRJfa3__",
    url: "https://jianshu.com",
    draft: 0,
    type: 1,
  },
  zhihu: {
    key: "6",
    name: "zhihu",
    nameZh: "知乎",
    logo: "http://jeff.spring4all.com/FitF7RONSixcMXeotzDj67J_c94k",
    url: "https://www.zhihu.com",
    draft: 0,
    type: 1,
  },
  oschina: {
    key: "7",
    name: "oschina",
    nameZh: "开源中国",
    logo: "http://jeff.spring4all.com/FiOQfVQn2Vyn3hP30Zvetxpx1Drp",
    url: "https://my.oschina.net",
    draft: 0,
    type: 2,
  },
  spring4all: {
    key: "8",
    name: "spring4all",
    nameZh: "Spring4All",
    logo: "http://jeff.spring4all.com/FgTjAQcAHmxMyUPEBMdBXlYwmh_8",
    url: "http://www.spring4all.com",
    draft: 0,
    type: 2,
  },
  toutiao: {
    key: "9",
    name: "toutiao",
    nameZh: "今日头条",
    logo: "http://jeff.spring4all.com/Fh_UEuFYkDAzjYsNLHHUsAqFIojy",
    url: "https://www.toutiao.com",
    draft: 0,
    type: 1,
  },
  imooc: {
    key: "10",
    name: "imooc",
    nameZh: "慕课手记",
    logo: "http://jeff.spring4all.com/FjaCzv7W7shJqCZ9RWYhjGEwczyh",
    url: "https://www.imooc.com/article",
    draft: 0,
    type: 2,
  },
  weibo: {
    key: "11",
    name: "weibo",
    nameZh: "微博",
    logo: "https://gw.alicdn.com/tfs/TB1wUXwT7L0gK0jSZFAXXcA9pXa-35-27.png",
    url: "https://weibo.com/",
    draft: 0,
    type: 1,
  },
  baijiahao: {
    key: "12",
    name: "baijiahao",
    nameZh: "百家号",
    logo: "https://gw.alicdn.com/tfs/TB1xIOXVxD1gK0jSZFsXXbldVXa-56-50.png",
    url: "https://baijiahao.baidu.com/",
    draft: 0,
    type: 3,
  },
};
export default {
  name: "Diffusion",
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      url:'',
      confirmLoading: false,
      visible: false,
      current: 0,
      okText: "下一步",
      channels,
      checks: {},
      check: "",
      isDrawer: false,
      channel: {},
    };
  },
  components: {
    CheckCircleTwoTone,
    Config,
  },
  computed: {
    getChannel() {
      let channel = [];
      const configs = this.$store.state.channel.configs;
      for (let i in configs) {
        console.log(configs[i].enable);
        if (configs[i].enable) {
          channel.push(configs[i]);
        }
      }
      return channel;
    },
    nextButton() {
      let disabled = false;
      for (let i in this.checks) {
        if (this.checks[i]) {
          disabled = true;
          break;
        }
      }
      return disabled;
    },
  },
  methods: {
    updateUrl(){
      console.log('更新链接')
      this.$message.success(
                      this.channels[this.check].nameZh + "链接更新成功"
      );
      this.$store.commit('updateUrl',{channel:this.check,url:this.url})
    },
    // 根据步骤条位置，更改按钮名称
    onChange(current) {
      console.log("onChange:", current);
      this.okText = current == 1 ? "确认群发" : "下一步";
      this.current = current;
    },
    //多选列表
    setCheck(name) {
      const check = this.checks[name];
      this.checks[name] = !check;
    },
    //点击图标出现下边框
    choice(key) {
      this.check = key;
    },
    drawer() {
      this.isDrawer = !this.isDrawer;
      this.channel = this.channels[this.check];
    },
    // 发布
    sumit() {
      if (this.current == 0) {
        this.current = 1;
      } else {
        // const article=this.$store.state.channel.configs;
        const article = this.$store.getters.getArticle(
          this.$store.state.channel.id
        );
        this.confirmLoading = true;
        let channels={}
        for (let item in this.checks) {
          if (this.checks[item]) {
            const config = this.$store.getters.getConfig(item);
            const userconfig = this.$store.getters.userConfig(item);
            //用户配置优先默认配置
            let form = {};
            if (userconfig) {
              form = userconfig;
            } else {
              form = {
                article: article,
                config: config.config,
              };
            }
            form["cookie"] = config.cookie;
            window.chrome.runtime.sendMessage(
              window.CHROME_ID,
              {
                func: "ChannelService." + config.channel + ".articlePublish",
                args: form,
                js: localStorage.getItem("operation"),
              },
              (t) => {
                console.log(t);
                   if (t.ok) {
                    this.$message.success(
                      this.channels[config.channel].nameZh + "发表成功"
                    );
                    const ch=this.$store.getters.getArticle(article.id)
                    ch.channels[config.channel].url=t.data
                    console.log(ch)
                    this.$store.commit("updateArticle", ch);
                  } else {
                    this.$notification.error({
                      message:
                        this.channels[config.channel].nameZh + "发布失败",
                      description: t.message,
                      icon: <CloseCircleTwoTone style="color: #f56c6c" />,
                    });
                  }
              }
            );
            channels[item]={
              logo:this.channels[config.channel].logo,
              url:''
            }
            console.log(form);
          }
        }
        let newChan={}
        Object.assign(newChan,article['channels'],channels)
        article['channels']=newChan
        this.$store.commit("updateArticle", article);
        console.log("提交");
      }
      this.okText = this.current == 1 ? "确认群发" : "下一步";
    },
  },
  watch: {
    open() {
      this.visible = true;
      this.current = 0;
    },
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
};
</script>
<style lang="stylus" scoped>
.warp {
  padding: 10px 10%;

  .title {
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
  }

  .channel {
    cursor: pointer;
    margin-right: 10px;
    display: inline-block;
    position: relative;
    padding-right: 8px;

    .check {
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  .steps-content {
    margin-top: 8px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    text-align: center;
    padding: 10px;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;

    &::-webkit-scrollbar {
      height: 4px;
      border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb {
      width: 8px;
      border-radius: 2px;
      background-color: #ccc;
    }
    span{
      cursor pointer
    }
  }

  .steps-second {
    .choice {
      padding-bottom: 23px;
      border-bottom: 4px solid #2196F3;
    }
  }

  .config {
    margin: 10px 0;
    padding: 10px;
    border-radius: 6px;
    background-color: #fafafa;
    border: 1px dashed #e9e9e9;

    .title {
      text-align: left;
      font-size: 16px;
      color: #9E9E9E;
    }

    .body {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px 0;
    }

    >>>.ant-alert-message {
      color: #9E9E9E;
    }
  }
}
</style>